<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">    
    <title>IFE ECMAScript</title>
    <style>
        .palette {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .palette li {
            width: 40px;
            height: 40px;
            border: 1px solid #000;
            cursor: pointer;
        }
    </style>
</head>
<body>            
    <ul class="palette">
        <li style="background-color:crimson"></li>
        <li style="background-color:bisque"></li>
        <li style="background-color:blueviolet"></li>
        <li style="background-color:coral"></li>
        <li style="background-color:chartreuse"></li>
        <li style="background-color:darkolivegreen"></li>
        <li style="background-color:cyan"></li>
        <li style="background-color:#194738"></li>        
    </ul>

    <p class="color-picker"></p>

    <script>
        // 普通方式
        // var list = document.querySelectorAll("li");
        // for (var i = i = 0, len = list.length; i < len; i++) {
        //     list[i].onclick = function(e) {
        //         var t = e.target;
        //         var c = t.style.backgroundColor;
        //         var p = document.getElementsByClassName("color-picker")[0]
        //         p.innerHTML = c;
        //         p.style.color = c;
        //     }
        // }
        // 采用事件代理
        var oUl = document.getElementsByClassName("palette")[0];
        oUl.onclick = function(event){
            var e = event || window.event;
            var target = e.target || e.srcElement;
            if(target.nodeName.toLocaleLowerCase() === "li"){
                var p = document.getElementsByClassName("color-picker")[0];
                p.style.color = p.textContent = target.style.backgroundColor;
            }
        }
    </script>
</body>
</html>